<script lang="ts" setup>
import {defineEmits, defineProps, ref} from 'vue';
import router from "@/router";
import axios from "axios";
import {useToast} from 'vue-toast-notification';
import 'vue-toast-notification/dist/theme-sugar.css';

const $toast = useToast();//消息提示栏
const props = defineProps({
  name: {
    type: String,
    value: ""
  },
  price: {
    type: Number,
    value: 0
  },
  img: {
    type: String,
    value: ""
  },
  year: {
    type: Number,
    value: 0
  },
  perfumeId: {
    type: Number,
    value: 0
  },
  brandId: {
    type: Number,
    value: 0
  },
  smell: {
    type: String,
    value: ""
  },
  brandText: {
    type: String,
    value: ""
  },
  ingredients: {
    type: String,
    value: ""
  },
  fragranceNote: {
    type: String,
    value: ""
  },
  userCollect: {
    type: Boolean,
    value: false
  }
});

// 创建内部状态
const isCollect = ref(props.userCollect);

// 定义事件
const emit = defineEmits();

//收藏该香水
const collectIt = () => {
  /**
   * 进行收藏操作
   */
  axios.post("/api/userData/collect/"+props.perfumeId,{},{
    headers:{
      token:localStorage.getItem("patient-auth-token")
    }
  }).then(res=>{
    // console.log(res)
    if(res.data.success){
      isCollect.value = true
      emit('updateUserCollect', true); // 向父组件发送更新信息
    }else{
      if(res.data.status == 403){
        $toast.open({
          message:"请先登录，再进行收藏操作",
          type:"error",
          position:"bottom-right"
        })
      }else{
        $toast.open({
          message:res.data.message,
          type:"error",
          position:"bottom-right"
        })
      }
    }
  })
}
const unCollectIt = () => {
  /**
   * 进行取消收藏操作
   */
  axios.post("/api/userData/unCollect/"+props.perfumeId,{},{
    headers:{
      token:localStorage.getItem("patient-auth-token")
    }
  }).then(res=>{
    // console.log(res)
    if(res.data.success){
      isCollect.value = false
      emit('updateUserCollect', false); // 向父组件发送更新信息
    }else{
      if(res.data.status == 403){
        $toast.open({
          message:"请先登录，再进行收藏操作",
          type:"error",
          position:"bottom-right"
        })
      }else{
        $toast.open({
          message:res.data.message,
          type:"error",
          position:"bottom-right"
        })
      }
    }
  })
}
const perfumeDetail = () => {
  console.log(props.perfumeId)
  router.push(`/perfume/detail?id=${props.perfumeId}`)
}

</script>

<template>
  <div class="perfume-box">
    <div class="perfume-item">
      <div class="top-item">
        <q-btn v-if="!userCollect" style="z-index: 2" color="primary" icon="favorite_border" round
               @click="collectIt"/>
        <q-btn v-if="userCollect" style="z-index: 2" color="deep-orange" icon="favorite" round @click="unCollectIt"/>

      </div>
      <div class="d-flex w-100p column items-center cursor-pointer" @click="perfumeDetail">
        <q-img
            :src="img"
            style="height: 240px; max-width: 170px"
        />
        <div class="brand-info">{{ brandText }}</div>
        <div class="perfume-name text-break">{{ name }}
          <q-tooltip>
            {{ name }}
          </q-tooltip>
        </div>
        <div class="bottom-info">
          {{ fragranceNote }} | {{ smell }}
        </div>
      </div>

    </div>
  </div>
</template>

<style lang="scss" scoped>
.perfume-box {
  background-color: #fff;
  padding-top: 5px;
  padding-bottom: 5px;
  margin: 10px;

  .perfume-item {
    width: 260px;
    height: 420px;
    border: 1px solid grey;
    margin: 5px;
    padding: 5px;
    display: flex;
    flex-direction: column;
    align-items: center;

    .top-item {
      width: 90%;
      display: flex;
      justify-content: flex-end;
    }

    .brand-info {
      margin-top: 20px;
      width: 95%;
      font-size: 12px;
    }

    .perfume-name {
      font-size: 20px;
      width: 95%;
      font-weight: bold;
    }

    .bottom-info {
      width: 90%;
      margin-top: 40px;
      color: slategray;
    }
  }
}

</style>
